import React, { useState, useEffect } from 'react'
import ReactECharts from 'echarts-for-react'
import * as echarts from 'echarts'
import BlockTitle from '../../../../../framework/BlockTitle'
import SouyeApi from '../../../../../../utils/apis/SouyeApi'

export default function Qyxzyjtjznl() {
    const [chartData, setChartData] = useState([])
    const [loading, setLoading] = useState(true)

    useEffect(() => {
        const fetchData = async () => {
            try {
                setLoading(true)
                const response = await SouyeApi.jzzy_find("企业、乡镇与家庭减灾能力")
                if (response && response.data?.length) {
                    setChartData(response.data)
                } else {
                    setChartData([
                        { jzzyxl: '企业大型救援装备', count: 0 },
                        { jzzyxl: '保险和再保险企业', count: 0 },
                        { jzzyxl: '社会应急力量', count: 0 },
                        { jzzyxl: '乡镇减灾资源', count: 0 },
                        { jzzyxl: '村社减灾资源', count: 0 },
                        { jzzyxl: '家庭减灾资源', count: 0 }
                    ])
                }
            } catch (error) {
                console.error('获取减灾能力数据失败:', error)
                // 如果接口失败，使用默认数据

            } finally {
                setLoading(false)
            }
        }

        fetchData()
    }, [])

    const getOption = () => {
        if (!chartData || chartData.length === 0) {
            return {}
        }

        const xAxisData = chartData.map(item => item.jzzyxl)
        const seriesData = chartData.map(item => item.count)
        const maxValue = Math.max(...seriesData)

        return {
            backgroundColor: 'transparent',
            grid: {
                left: '10%',
                right: '5%',
                top: '10%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: xAxisData,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#2B5797'
                    }
                },
                axisLabel: {
                    color: '#ffffff',
                    fontSize: 12,
                    interval: 0,
                    rotate: 0,
                    formatter: function (value) {
                        // 处理长文本换行
                        if (value.length > 6) {
                            return value.slice(0, 6) + '\n' + value.slice(6)
                        }
                        return value
                    }
                },
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                max: maxValue + 5,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#1B4483',
                        type: 'dashed'
                    }
                }
            },
            series: [
                {
                    type: 'bar',
                    data: seriesData,
                    barWidth: 14, // 调整为14px宽度的柱子
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: '#4A9EFF'
                            },
                            {
                                offset: 1,
                                color: '#1B5CB8'
                            }
                        ]),
                        barBorderRadius: [6, 6, 6, 6] // 设置上下两头都为圆角
                    },
                    label: {
                        show: true,
                        position: 'top',
                        color: '#ffffff',
                        fontSize: 14,
                        fontWeight: 'bold'
                    },
                    emphasis: {
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#6BB6FF'
                                },
                                {
                                    offset: 1,
                                    color: '#2D6FD1'
                                }
                            ])
                        }
                    }
                }
            ],
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                borderColor: '#4A9EFF',
                borderWidth: 1,
                textStyle: {
                    color: '#ffffff'
                },
                formatter: function (params) {
                    return params[0].name + '：' + params[0].value + ' 处'
                }
            }
        }
    }

    return (
        <div style={{
            width: '100%',
            // background: 'linear-gradient(135deg, #0F2A5C 0%, #1B4483 50%, #0F2A5C 100%)',
            // borderRadius: '8px',
            // border: '1px solid #2B5797',
            overflow: 'hidden'
        }}>
            <BlockTitle style={{
                marginBottom: 0,
                fontFamily: 'pmzd',
                width: 435
            }}>
                企业、乡镇与家庭减灾能力
            </BlockTitle>
            <div style={{
                position: 'absolute',
                top: '50px',
                right: '20px',
                color: '#ffffff',
                fontSize: '12px'
            }}>
                单位(处)
            </div>
            <div style={{
                height: '250px',
                padding: '10px'
            }}>
                {loading ? (
                    <div style={{
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        height: '100%',
                        color: '#ffffff',
                        fontSize: '14px'
                    }}>
                        数据加载中...
                    </div>
                ) : (
                    <ReactECharts
                        option={getOption()}
                        style={{ height: '100%', width: '100%' }}
                        notMerge={true}
                        lazyUpdate={true}
                    />
                )}
            </div>
        </div>
    )
}